<template>
	<div class="columnManage">
		<div class="public-search-box">
			<el-form inline
					 ref="searchRef"
					 :model="searchData">
				<el-form-item>
					<el-input v-model="searchData.name"
							  size="small"
							  clearable
							  placeholder="姓名"
							  @input="pageChange(1)">
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary"
							   size="small"
							   icon="el-icon-search"
							   v-if="hasPerm('column:list')"
							   @click="pageChange(1)">查询
					</el-button>
					<el-button type="primary"
							   size="small"
							   icon="el-icon-plus"
							   v-if="hasPerm('column:add')"
							   @click="addOrUpdate('add')">新增
					</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="public-table"
			 v-loading="loading"
			 element-loading-text="拼命加载中...">
			<el-table :data="list"
					  height="calc(100vh - 114px - 30px - 61px - 72px - 30px)"
					  style="width: 100%">
				<el-table-column prop="orderNumber"
								 label="序号"
								 align="center"></el-table-column>
				<el-table-column prop="name"
								 label="栏目名称"
								 align="center"></el-table-column>
				<el-table-column prop="link"
								 label="链接"
								 align="center"></el-table-column>
				<el-table-column prop="keyword"
								 label="关键词"
								 align="center"></el-table-column>
				<el-table-column prop="description"
								 label="描述"
								 align="center"></el-table-column>
				<el-table-column prop="created_time"
								 label="创建时间"
								 align="center">
					<template slot-scope='scope'>
						<span>{{ scope.row.created_time | dateTime }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="updated_time"
								 label="更新时间"
								 align="center">
					<template slot-scope='scope'>
						<span>{{ scope.row.updated_time | dateTime }}</span>
					</template>
				</el-table-column>
				<el-table-column label="操作"
								 align="center">
					<template slot-scope="scope">
						<el-button type="primary"
								   size="small"
								   v-if="hasPerm('column:edit')"
								   @click="addOrUpdate('update', scope.row)">修改
						</el-button>
						<el-button type="danger"
								   size="small"
								   v-if="hasPerm('column:delete')"
								   @click="del(scope.row)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<pagination :total="total"
					:page="searchData.currentPage"
					:pageSize="searchData.pageSize"
					@pageChange="pageChange">
		</pagination>
		<el-dialog :title="saveData.id === '' ? '新增' : '修改'"
				   width="500px"
				   custom-class="public-dialog"
				   :close-on-click-modal="false"
				   :visible.sync="addOrUpdateVisible"
				   :before-close="close">
			<el-form ref="addOrUpdateRef"
					 :model="saveData"
					 :rules="addOrUpdateRules"
					 label-width="100px">
				<el-form-item label="栏目名称:"
							  prop="name">
					<el-input v-model="saveData.name"></el-input>
				</el-form-item>
				<el-form-item label="链接:"
							  prop="link">
					<el-input v-model="saveData.link"></el-input>
				</el-form-item>
				<el-form-item label="关键词:"
							  prop="keyword">
					<el-input v-model="saveData.keyword"></el-input>
				</el-form-item>
				<el-form-item label="描述:"
							  prop="description">
					<el-input v-model="saveData.description"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer">
                <el-button size="small"
						   @click="close">取消</el-button>
                <el-button type="primary"
						   size="small"
						   @click="submit">保存</el-button>
            </span>
		</el-dialog>
	</div>
</template>

<script>
import pagination from '@/components/pagination/pagination'
import { columnApi } from '@/api'
import { numSort } from '@/utils'

export default {
	name: 'admin',
	data () {
		return {
			searchData: {
				name: '',
				currentPage: 1,
				pageSize: 10
			},
			loading: true,
			total: 0,
			list: [],
			addOrUpdateVisible: false,
			saveData: {
				id: '',
				name: '',
				link: '',
				keyword: '',
				description: ''
			},
			addOrUpdateRules: {
				name: [
					{
						required: true,
						message: '请输入栏目名',
						trigger: 'blur'
					}
				],
				link: [
					{ required: true, message: '请输入链接', trigger: 'blur' }
				],
				keyword: [
					{
						required: true,
						message: '请输入关键词',
						trigger: 'blur'
					}
				],
				description: [
					{ required: true, message: '请输入描述', trigger: 'blur' }
				]
			}
		}
	},
	mounted () {
		this.getList()
	},
	methods: {
		// 获取列表
		async getList () {
			this.loading = true
			let params = Object.assign({}, this.searchData)
			const { err, data } = await columnApi.getPage(params)
			if (err) {
				return false
			}
			if (data.list.length === 0 && params.currentPage !== 1) {
				// 删除后判断当前页面是否无数据 如果有数据则正常处理数据，如不正常数据为空时。则重新获取有数据的页面条件
				// 删除后当前页面无数据时，则重新计算有数据的页面重新获取数据
				let current = Math.ceil(data.totalCount / params.pageSize)
				this.pageChange(current)
			} else {
				data.list.forEach((item, index) => {
					item['orderNumber'] = numSort(
						index,
						params.currentPage,
						params.pageSize
					)
				})
				this.list = data.list
				this.total = data.totalCount
				setTimeout(() => {
					this.loading = false
				}, 100)
			}
		},
		addOrUpdate (val, item) {
			this.addOrUpdateVisible = true
			if (val === 'update') {
				this.detDetail(item)
			}
		},
		// 提交
		submit () {
			let api = null
			let message = ''
			this.$refs.addOrUpdateRef.validate(async (valid) => {
				if (valid) {
					let params = Object.assign({}, this.saveData)
					if (params.id === '') {
						api = columnApi.addData
						message = '添加成功'
					} else {
						api = columnApi.updateData
						message = '更新成功'
					}
					const { err, data } = await api(params)
					if (err) {
						return false
					}
					this.$message({
						message: message,
						type: 'success'
					})
					this.close()
					this.getList()
				}
			})
		},
		// 获取详情
		async detDetail (item) {
			const { err, data } = await columnApi.detailData(item.id)
			if (err) {
				return false
			}
			this.saveData.id = data.id
			this.saveData.name = data.name
			this.saveData.link = data.link
			this.saveData.keyword = data.keyword
			this.saveData.description = data.description
		},
		// 删除
		del (item) {
			this.$confirm('确定删除当前数据吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(async () => {
				const { err, data } = await columnApi.delData(item)
				if (err) {
					return false
				}
				this.$message({
					message: '删除成功',
					type: 'success'
				})
				this.getList()
			}).catch(() => { })
		},
		// 分页
		pageChange (val, size) {
			if (size) {
				this.searchData.pageSize = size
			}
			this.searchData.currentPage = val
			this.getList()
		},
		// 关闭
		close () {
			this.addOrUpdateVisible = false
			this.saveData.id = ''
			this.$refs.addOrUpdateRef.resetFields()
		}
	},
	components: {
		pagination
	}
}
</script>

<style scoped lang="less">
.columnManage {
	width: 100%;
}
</style>
